<template>
  <div>
    <div>
      <ul>
        <li v-for="(val, index) in arr" :key="index">{{val}}</li>
      </ul>
      <button @click="btn">走一走</button>
    </div>
    <hr />
    <div>
      <ul>
        <li v-for="(val ,index) in ary" :key="index">
          {{val}}
          <button @click="btn3(index)">删除</button>
        </li>
      </ul>
      <button @click="btn2">点击随机生成</button>
    </div>
    <hr />
    <div id="#add">
      <table class="tb">
        <tr>
          <th>编号</th>
          <th>品牌名称</th>
          <th>创立时间</th>
          <th>操作</th>
        </tr>
        <!-- 循环渲染的元素tr -->
        <tr v-for="(val, index) in list" :key="index">
          <td>{{val.id}}</td>
          <td>{{val.name}}</td>
          <td>{{val.time}}</td>
          <td>
            <button @click="btn4(index)">删除</button>
          </td>
        </tr>
        <tr v-if="list.length ===0">
          <td colspan="4">没有数据咯~</td>
        </tr>
      </table>
    </div>
    <hr />
    <div>
      <p>欢迎光临，vue开发的收银系统水果店</p>
      <p>苹果10￥/斤， 折扣 8折</p>
      <p>
        请你输入要购买的斤数
        <input type="text" v-model.number="num" />
      </p>
      <button @click="btn5(num)">结账买单</button>
      <p>结账单：总价：{{num1}}￥元 折后价：{{num2}}￥元 节省：{{num3}}￥元</p>
    </div>
    <hr />
    <div>
      <div v-for="(val,index) in array" :key="index" style=" display: inline-block;">
        <input type="checkbox" :value="val" v-model="array1" />
        <span>{{val}}</span>
      </div>
      <ul>
        <li v-for="(val,index) in array1" :key="index">{{val}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["美女", "帅哥", "程序猿"],
      ary: [1, 2, 3],
      list: [
        { id: 1, name: "奔驰", time: "2020-08-01" },
        { id: 2, name: "宝马", time: "2020-08-02" },
        { id: 3, name: "奥迪", time: "2020-08-03" },
      ],
      num: 0,
      num1: 0,
      num2: 0,
      num3: 0,
      array: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      array1: [],
    };
  },
  methods: {
    btn() {
      this.arr.push(this.arr[0]);
      this.arr.shift();
    },
    btn2() {
      this.ary.push(Math.floor(Math.random() * 100));
    },
    btn3(index) {
      this.ary.splice(index, 1);
    },
    btn4(index) {
      this.list.splice(index, 1);
    },
    btn5(num) {
      this.num1 = num * 10;
      this.num2 = num * 8;
      this.num3 = this.num1 - this.num2;
    },
  },
};
</script>

<style>
#add {
  width: 600px;
  margin: 10px auto;
}
.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>